<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天然有机食品网站</title>
    <style>
        body{
            margin:0;
            padding:0;
            font-family:"Microsoft YaHei"
        }


        .header{
            margin:10px auto;
            box-sizing:border-box;
            padding-bottom:10px;
            background-color: #f7f6f2;
        }
        .header .tiao {
            width:100%;
            height:20px;
            box-sizing:border-box;
            background:linear-gradient(#e6e5e1, #f7f6f2);
        }
        .header h1,.header h2 ,.header p {
            padding:0 10px;
        }
        .header h1{
            font-size:16px;
            font-weight: 700;
            color:#7dbe00;
            margin:0;
        }
        .header h1 span{
            color:#000;
        }
        .header h2 {
            font-size:12px;
            font-weight:normal;
            color:#a8a7a4;
        }
        header p{
            font-size:14px;
        }

        nav {

        }
        nav ul {
            margin:0;
            padding:0;
        }
        nav li {
            list-style: none;
            margin:0;
            padding:0;
        }
        nav li a{
            text-decoration: none;
        }
        /*
        nav>ul{
            overflow:hidden;
        }
        */
        nav>ul:after{
            display:block;
            height:0;
            content:"\0020";
            clear:both;
            zoom:1;
        }
        nav>ul>li{
            float:left;
            margin-right:10px;
            position:relative;
        }
        nav>ul>li>a{
            display: block;
            width:90px;
            padding-left:10px;
            line-height: 26px;
            border-radius:10px 10px 0 0;
            background-color:#fefdf9;
            border:1px solid #e5e5e4;
            color:#000;
            text-decoration: none;
            box-sizing: border-box;
        }
        nav>ul>li>a:hover{
            color:#000;
        }
        nav>ul>li>ul {
            display: none;
            position:absolute;
            left:0px;
            top:28px;
        }
        nav>ul>li:hover>ul{
            display:block;
        }
        nav>ul>li>ul li{
            border-left:1px solid  #e5e5e4;
            border-right:1px solid  #e5e5e4;
            border-bottom:1px solid  #e5e5e4;
            box-sizing:border-box;
        }
        nav>ul>li>ul>li{
            position:relative;
            width:90px;
            text-align: right;
            padding-right:10px;
            background: #fefdf9;

        }
        nav>ul>li>ul>li>ul{

            position:absolute;
            left:90px;
            top:-1px;
            display: none;
            margin-left:-2px;

        }
        nav>ul>li>ul>li:hover>ul{
            display:block;
        }
        nav>ul>li>ul>li>ul>li{
            min-width:100px;
            text-align: left;
            background: #feffff;
            font-size:13px;
            padding:2px 0 2px 10px;

        }
        nav>ul>li>ul>li>ul>li:first-child{
            border-top:1px solid  #e5e5e4;
        }

        .line {
            height:1px;
            background:url(images/line.png) left top repeat-x;
        }

        .main {
            width:100%;
            display:flex;
            flex-wrap:wrap;
        }
        .main .product {
            width:255px;
            text-align:center;
            margin:5px;
            /* flex:1; */
        }
        .main .product img{
            /* width:267px;
            height:267px; */
            width:255px;
        }
        .main .product h3{
            margin-top:0;
            color:#333;
            margin-bottom:0;
        }
        .main .product h3 span{
            color:#8a8a8a;
            font-weight: normal;
            padding-right:8px;
            font-size:12px;
        }
        .main .product p{
            color:#7fba00;
            margin-top:0;
            padding-top:0;
        }
        .main .product p span {
            color:#aaa;
            text-decoration:line-through;
        }
        .footer {
            padding:5px 0;
            text-align:center;

            background: linear-gradient(45deg, #666 ,#aaa 60%, #666 );
        }
        .footer p {
            margin:0;
            padding:0;
        }
        .smallShow{
            display:none;
        }
        @media(max-width:767px) {
            .container{
                min-width:320px;
                width:100%;
                margin:0 auto;
                box-sizing: border-box;
                padding:15px;

            }
            header p {
                display: none;
            }
            nav {
                display:none;
            }
            /*
            nav>ul{
                display:none;
            }
            */
            nav>ul>li>ul {
                display:block;
            }
            nav>ul>li>ul>li>{

                display:block;
            }
            nav>ul>li>ul>li>ul>li{
                display:block;
            }

            .smallShow{
                display:block;
            }



        }
        @media (min-width: 768px){
            .container{
                width:800px;
                margin:0 auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="tiao"></div>
            <hgroup>
                <h1>天然有机食品<span>网站</span></h1>
                <h2>绿色有机食品，自然触动你的心。</h2>
                <p>绿色生态，强劲生命活力。源于自然，回归天然。天然环保，循环高效。回归绿色家园，畅享自然精华。心系安全，源自天然。回归自然是根本，健康回归不是梦。</p>
            </hgroup>
        </header>
        <a href="javascript:;" class="smallShow">菜单</a>
        <nav>
            <ul>
                <li>
                    <a href="javascript:;">所有种类</a>
                    <ul>
                        <li>
                            <a href="">水果</a>

                            <ul>
                                <li><a href="">柑橘类</a></li>
                                <li><a href="">核果类</a></li>
                                <li><a href="">瓜类</a></li>
                            </ul>

                        </li>
                        <li>
                            <a href="">蔬菜</a>
                            <ul>
                                <li><a href="">绿叶菜类</a></li>
                                <li><a href="">水生蔬菜</a></li>
                                <li><a href="">食用菌类</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--
                <li>
                    <a href="javascript:;">排序规则</a>
                    <ul>
                        <li>
                            <a href="">价格</a>
                        </li>
                        <li>
                            <a href="">颜色</a>
                        </li>
                    </ul>
                </li>
                -->
            </ul>
        </nav>
        <p class="line"></p>
        <div class="main">
            <div class="product">
                <a href=""><img src="images/p_1.jpg" alt=""></a>
                <h3><span>香气</span>香菇</h3>
                <p>￥50.00 <span>￥65.00</span></p>
            </div>
            <div class="product">
                <a href=""><img src="images/p_2.jpg" alt=""></a>
                <h3><span>鲜红</span>樱桃</h3>
                <p>￥12.00 <span>￥25.00</span></p>
            </div>
            <div class="product">
                <a href=""><img src="images/p_3.jpg" alt=""></a>
                <h3><span>迷人</span>白菜</h3>
                <p>￥50.00 <span>￥65.00</span></p>
            </div>
            <div class="product">
                <a href=""><img src="images/p_4.jpg" alt=""></a>
                <h3><span>搞笑</span>青椒</h3>
                <p>￥50.00 <span>￥65.00</span></p>
            </div>
            <div class="product">
                <a href=""><img src="images/p_5.jpg" alt=""></a>
                <h3><span>高大</span>菠萝</h3>
                <p>￥50.00 <span>￥65.00</span></p>
            </div>
            <div class="product">
                <a href=""><img src="images/p_6.jpg" alt=""></a>
                <h3><span>崭亮</span>西红柿</h3>
                <p>￥50.00 <span>￥65.00</span></p>
            </div>
        </div>
        <footer class="footer">
            <p>联系方式: <span>QQ:1234567890 </span></p>
        </footer>
    </div>
    <script type="text/javascript">
        var smallShow = document.querySelector('.smallShow');
        var isShow = false;
        smallShow.addEventListener('click',function(){
            if(!isShow){
                smallShow.nextElementSibling.style.display = 'block';
                isShow = true;
            }else{
                smallShow.nextElementSibling.style.display = 'none';
                isShow = false;
            }

        });
    </script>
</body>
</html>
